<template>
<el-container class='headerStyle'>
  <el-header class="header" style="height:50px">
    <div style="float:left">
      <img src='../../../static/img/logo.png.png' style="margin-top:13px"  ></img>
    </div>
    <div style="float:left;padding-left:10px">
      <span style="font-size:20px">航家运营管理系统</span>
    </div>
    <div class='close-btn'>
      <span style="font-size:14px" @click="submitLogOut()">退出</span>
    </div>
    <div style="float:right;padding-right:20px">
      <span style="font-size:14px">{{userName}}</span>
    </div>
    <div style="float:right;padding-right:10px">
      <img src='../../../static/img/icon-user.png' style="margin-top:13px"></img>
    </div>
  </el-header>
</el-container>
</template>
<script>
  import apiLogin from '../../api/loginHome/apiLogin'
  export default {
    mounted () {
      this.userName = sessionStorage.getItem('username')
    },
    data () {
      // 验证两次输入的密码是否一致
      let validatePassword = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'))
        } else {
          if (this.personalForm.confirmNewPassword !== '') {
            this.$refs.personalForm.validateField('confirmNewPassword')
          }
          callback()
        }
      }
      let validateConfirmPassword = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'))
        } else if (value !== this.personalForm.newPassword) {
          callback(new Error('两次输入的密码不一致！'))
        } else {
          callback()
        }
      }
      return {
        userName: '',
        testForm: {
          pageNum: 1,
          recordNum: 2
        },
        personalCenterVisable: false,
        confirmPasswordVisable: false,
        changePasswordVisable: false,
        personalForm: {
          role: '',
          name: '',
          employeeTels: '',
          password: '',
          newPassword: '',
          confirmNewPassword: ''
        },
        rules: {
          password: [{
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }],
          newPassword: [{
            validator: validatePassword,
            trigger: 'blur'
          }],
          confirmNewPassword: [{
            validator: validateConfirmPassword,
            trigger: 'blur'
          }]
        },
        formLabelWidth: '25%'
      }
    },
    computed: {
      username () {
        let username = sessionStorage.getItem('nam')
        return username
      },
      roleName () {
        let roleName = sessionStorage.getItem('role')
        return roleName
      },
      site () {
        let site = sessionStorage.getItem('site')
        return site
      }
    },
    methods: {
      submitLogOut () {
        this.$confirm('确认退出登录么？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.setLogOutFro()
        }).catch(() => {
          console.log('confirm退出登录失败')
        })
      },
      setLogOutFro () {
        console.log('setLogOut')
        let para = {
          header: JSON.stringify({
            token: sessionStorage.getItem('token')
          }),
          body: JSON.stringify({
            username: sessionStorage.getItem('username')
          })
        }
        console.log(para)
        apiLogin.logOut(para).then(res => {
          console.log('logout回参')
          console.log(res)
          if (res.body.result === 1000) {
            this.$message.success('退出登录')
            sessionStorage.removeItem('adminName')
            sessionStorage.removeItem('position')
            sessionStorage.removeItem('username')
            sessionStorage.removeItem('roleId')
            sessionStorage.removeItem('token')
            sessionStorage.removeItem('adminId')
            this.$router.push('/login')
          } else {
            this.$message.success('退出登录失败')
          }
        })
        .catch(error => {
          console.log('连接失败')
          console.log(error)
        })
      },
      // 个人信息与退出，下拉框
      handleCommand (command) {
        if (command === 'loginout') {
          /* api.logOut()
            .then(res => {
              console.log('连接成功')
              console.log(res.headers)
            })
            .catch(error => {
              console.log('连接失败')
              console.log(error)
            }) */
          sessionStorage.removeItem('ms_username')
          sessionStorage.removeItem(sessionStorage.getItem('nam'))
          sessionStorage.removeItem('nam')
          sessionStorage.removeItem('role')
          sessionStorage.removeItem('tel')
          this.$router.push('/login')
        } else if (command === 'personalCenter') {
          this.personalCenterVisable = true
        }
      },
      confirmPassword () {
        // 确认旧密码
        /* api.checkPassWord(this.personalForm)
          .then(res => {
            console.log('连接成功')
            console.log(sessionStorage.getItem(sessionStorage.getItem('nam')))
            if (res.result === 1) {
              this.changePasswordVisable = true
              this.confirmPasswordVisable = false
            } else {
              this.$message({
                showClose: true,
                message: '密码出错，不能修改',
                type: 'warning'
              })
            }
          })
          .catch(error => {
            console.log('连接失败')
            console.log(error)
          }) */
        // 确认成功
      },
      changPassword () {
        /* api.changePassWord(this.personalForm)
          .then(res => {
            console.log('连接成功')
            console.log(res)
            if (res.result === 1) {
              this.$message({
                showClose: true,
                message: '密码修改成功',
                type: 'success'
              })
              this.changePasswordVisable = false
            }
          })
          .catch(error => {
            console.log('连接失败')
            console.log(error)
          }) */
      }

    }
  }
</script>

<style scoped>
  .close-btn :hover{
    cursor: pointer;
  }
  .close-btn {
    float:right;padding-right:30px
  }
  .header {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 50px;
    font-size: 22px;
    line-height: 50px;
    color: #fff;
    background: -webkit-linear-gradient(left, #0c547b , #80d2ca); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #0c547b , #80d2ca); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #0c547b , #80d2ca); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, #0c547b , #80d2ca); /* 标准的语法（必须放在最后） */
  }

  .header .logo {
    float: left;
    width: 250px;
    text-align: center;
  }

  .user-info {
    float: right;
    padding-right: 50px;
    font-size: 16px;
  }

  .user-info .el-dropdown-link {
    position: relative;
    display: inline-block;
    padding-left: 50px;
    cursor: pointer;
    vertical-align: middle;
  }

  .user-info .user-logo {
  }

  .el-dropdown-menu__item {
    text-align: center;
  }

  .el-dialog .el-input {
    width: 80%
  }
</style>
<style>
  .sidebar {
    top:50px !important;
  }
  /* .headerStyle .header-title {
    height: 50px;
    font-size: 20px;
    color: #ffffff;
    margin-top:-10px;
    position: relative;
  } */
  .headerStyle .header-title {
    font-size: 20px;
    color: #ffffff;
    margin-top:-5px;
    width:auto;
  }
</style>
